<div class="container">
  <div class="line"></div>
  <label for="alien" class="label">
    <input checked="" name="future-is-here" type="radio" id="alien">
    <div class="button">
      <span class="shadow"></span>
  <span class="edge"></span>
  <span class="front text">
    <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"></path><path d="M12 2a8.5 8.5 0 0 1 8.5 8.5c0 6.5-5.5 12-8.5 12s-8.5-5.5-8.5-12A8.5 8.5 0 0 1 12 2zm0 2a6.5 6.5 0 0 0-6.5 6.5c0 4.794 4.165 10 6.5 10s6.5-5.206 6.5-10A6.5 6.5 0 0 0 12 4zm5.5 7c.16 0 .319.008.475.025a4.5 4.5 0 0 1-4.95 4.95A4.5 4.5 0 0 1 17.5 11zm-11 0a4.5 4.5 0 0 1 4.475 4.975 4.5 4.5 0 0 1-4.95-4.95C6.18 11.008 6.34 11 6.5 11z" fill="currentColor"></path></svg>
  </span>
  <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="pop"><path d="M0 0h24v24H0z" fill="none"></path><path d="M12 2a8.5 8.5 0 0 1 8.5 8.5c0 6.5-5.5 12-8.5 12s-8.5-5.5-8.5-12A8.5 8.5 0 0 1 12 2zm0 2a6.5 6.5 0 0 0-6.5 6.5c0 4.794 4.165 10 6.5 10s6.5-5.206 6.5-10A6.5 6.5 0 0 0 12 4zm5.5 7c.16 0 .319.008.475.025a4.5 4.5 0 0 1-4.95 4.95A4.5 4.5 0 0 1 17.5 11zm-11 0a4.5 4.5 0 0 1 4.475 4.975 4.5 4.5 0 0 1-4.95-4.95C6.18 11.008 6.34 11 6.5 11z" fill="currentColor"></path></svg>
    </div>
  </label>
  <label for="bear" class="label">
    <input name="future-is-here" type="radio" id="bear">
    <div class="button">
      <span class="shadow"></span>
  <span class="edge"></span>
  <span class="front text">
    <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"></path><path d="M17.5 2a4.5 4.5 0 0 1 2.951 7.897c.355.967.549 2.013.549 3.103A9 9 0 1 1 3.55 9.897a4.5 4.5 0 1 1 6.791-5.744 9.05 9.05 0 0 1 3.32 0A4.494 4.494 0 0 1 17.5 2zm0 2c-.823 0-1.575.4-2.038 1.052l-.095.144-.718 1.176-1.355-.253a7.05 7.05 0 0 0-2.267-.052l-.316.052-1.356.255-.72-1.176A2.5 2.5 0 1 0 4.73 8.265l.131.123 1.041.904-.475 1.295A7 7 0 1 0 19 13c0-.716-.107-1.416-.314-2.083l-.112-.33-.475-1.295 1.04-.904A2.5 2.5 0 0 0 17.5 4zM10 13a2 2 0 1 0 4 0h2a4 4 0 1 1-8 0h2z" fill="currentColor"></path></svg>
  </span>
  <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="pop"><path d="M0 0h24v24H0z" fill="none"></path><path d="M17.5 2a4.5 4.5 0 0 1 2.951 7.897c.355.967.549 2.013.549 3.103A9 9 0 1 1 3.55 9.897a4.5 4.5 0 1 1 6.791-5.744 9.05 9.05 0 0 1 3.32 0A4.494 4.494 0 0 1 17.5 2zm0 2c-.823 0-1.575.4-2.038 1.052l-.095.144-.718 1.176-1.355-.253a7.05 7.05 0 0 0-2.267-.052l-.316.052-1.356.255-.72-1.176A2.5 2.5 0 1 0 4.73 8.265l.131.123 1.041.904-.475 1.295A7 7 0 1 0 19 13c0-.716-.107-1.416-.314-2.083l-.112-.33-.475-1.295 1.04-.904A2.5 2.5 0 0 0 17.5 4zM10 13a2 2 0 1 0 4 0h2a4 4 0 1 1-8 0h2z" fill="currentColor"></path></svg>
    </div>
  </label>
  <label for="mickey" class="label">
    <input name="future-is-here" type="radio" id="mickey">
    <div class="button">
      <span class="shadow"></span>
  <span class="edge"></span>
  <span class="front text">
    <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"></path><path d="M18.5 2a4.5 4.5 0 0 1 .883 8.913l.011.027a8 8 0 0 1-7.145 11.056L12 22a8 8 0 0 1-7.382-11.088A4.499 4.499 0 0 1 5.5 2a4.5 4.5 0 0 1 4.493 4.254l.073-.019A8.018 8.018 0 0 1 12 6l.25.004a8 8 0 0 1 1.756.25A4.5 4.5 0 0 1 18.5 2zM12 8a6 6 0 1 0 0 12 6 6 0 0 0 0-12zM5.5 4a2.5 2.5 0 0 0 0 5l.164-.005.103-.01A8.044 8.044 0 0 1 7.594 7.32l.33-.206A2.5 2.5 0 0 0 5.5 4zm13 0a2.5 2.5 0 0 0-2.466 2.916l.043.2.028.016a8.04 8.04 0 0 1 2.128 1.852A2.5 2.5 0 1 0 18.5 4z" fill="currentColor"></path></svg>
  </span>
  <svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="pop"><path d="M0 0h24v24H0z" fill="none"></path><path d="M18.5 2a4.5 4.5 0 0 1 .883 8.913l.011.027a8 8 0 0 1-7.145 11.056L12 22a8 8 0 0 1-7.382-11.088A4.499 4.499 0 0 1 5.5 2a4.5 4.5 0 0 1 4.493 4.254l.073-.019A8.018 8.018 0 0 1 12 6l.25.004a8 8 0 0 1 1.756.25A4.5 4.5 0 0 1 18.5 2zM12 8a6 6 0 1 0 0 12 6 6 0 0 0 0-12zM5.5 4a2.5 2.5 0 0 0 0 5l.164-.005.103-.01A8.044 8.044 0 0 1 7.594 7.32l.33-.206A2.5 2.5 0 0 0 5.5 4zm13 0a2.5 2.5 0 0 0-2.466 2.916l.043.2.028.016a8.04 8.04 0 0 1 2.128 1.852A2.5 2.5 0 1 0 18.5 4z" fill="currentColor"></path></svg>
    </div>
  </label>
</div>
<style>
/* From Uiverse.io by adamgiebl - Tags: skeuomorphism, realistic, neon, radio */
.container {
  display: flex;
  position: relative;
  gap: 4px;
  color: white;
}

.container input[type="radio"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.container input[type="radio"]:checked + .button {
  opacity: 1;
}

.container input[type="radio"]:checked + .button .pop {
  animation: fly-up 0.5s ease-in-out;
}

.button {
  position: relative;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  outline-offset: 4px;
  transition: filter 250ms;
  user-select: none;
  touch-action: manipulation;
  width: 50px;
  border-radius: 30px;
  height: 50px;
  opacity: 0.4;
  box-shadow: 0px 0px 40px -5px hsl(170deg 100% 40%);
}

.button .pop {
  width: 22px;
  height: 22px;
  position: absolute;
  display: block;
  left: 50%;
  z-index: -1;
  transform: translate(-50%, 0);
  top: 0;
  opacity: 0.3;
}

@keyframes fly-up {
  0% {
    transform: translate(-50%, 0);
  }

  50% {
    transform: translate(-50%, -40px);
  }

  100% {
    transform: translate(-50%, 0);
  }
}

.button .shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: hsl(0deg 0% 0% / 0.25);
  will-change: transform;
  transform: translateY(2px);
  transition: all
    600ms
    cubic-bezier(.3, .7, .4, 1);
}

.button .edge {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: linear-gradient(
    to left,
    hsl(170deg 100% 16%) 0%,
    hsl(170deg 100% 32%) 8%,
    hsl(170deg 100% 32%) 92%,
    hsl(170deg 100% 16%) 100%
  );
}

.button .front {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  font-size: 1.1rem;
  color: white;
  background: hsl(170deg 100% 50%);
  will-change: transform;
  transform: translateY(-4px);
  box-shadow: inset 4px 4px 8px hsl(170deg 100% 30%), inset -4px -4px 8px hsl(170deg 100% 80%);
  transition: all
    600ms
    cubic-bezier(.3, .7, .4, 1);
}

.button .front svg {
  display: block;
  color: hsl(170deg 100% 30%);
  margin-right: 0;
}

.button:hover .front {
  transform: translateY(-6px);
  transition: transform
  
    250ms
    cubic-bezier(.3, .7, .4, 1.5);
}

.button:active .front {
  transform: translateY(-2px);
  transition: transform 34ms;
}

.button:hover .shadow {
  transform: translateY(4px);
  transition: transform
    250ms
    cubic-bezier(.3, .7, .4, 1.5);
}

.button:active .shadow {
  transform: translateY(1px);
  transition: transform 34ms;
}
</style>
